import {
  Badge,
  Button,
  Card,
  Col,
  Input,
  Pagination,
  type PaginationProps,
  Popconfirm,
  Progress,
  Row,
  Table,
  type TableProps,
} from 'antd'
import { getTenementList } from '../../api/tenement.ts'
import { useEffect, useState } from 'react'
import type { ChangeEvent } from 'react'

interface DataType {
  key: string
  name: string
  person: string
  tel: string
  status: string
  vacancyRate: number
  propertyFee: string
}

export interface QueryForm {
  name: string
  person: string
  pageNumber?: number
  pageSize?: number
}

export default function Temement() {
  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'No',
      key: 'index',
      render: (_value: any, _record: DataType, index: number) => index + 1,
    },
    {
      title: '楼宇名称',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '负责人',
      key: 'person',
      dataIndex: 'person',
    },
    {
      title: '负责人电话',
      key: 'tel',
      dataIndex: 'tel',
    },
    {
      title: '使用状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '空置率',
      key: 'vacancyRate',
      dataIndex: 'vacancyRate',
      render: (value: number) => <Progress percent={value} />,
    },
    {
      title: '物业费率',
      key: 'propertyFee',
      dataIndex: 'propertyFee',
      render: (value) => <Badge color="green" text={value} />,
    },
    {
      title: '操作',
      render: () => (
        <>
          <Button type="primary" size="small">
            编辑
          </Button>
          <Popconfirm description="是否确认删除" title="确认删除" cancelText="取消" okText="确认">
            <Button type="primary" danger size="small" className="ml">
              删除
            </Button>
          </Popconfirm>
        </>
      ),
    },
  ]

  const [queryForm, setQueryForm] = useState<QueryForm>({
    name: '',
    person: '',
  })
  const [pageNumber, setPageNumber] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(10)
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)

  const [dataSource, setDataSource] = useState<Array<DataType>>()

  const loadData = async () => {
    setLoading(true)
    try {
      const params = { ...queryForm, pageNumber, pageSize }
      const {
        data: { list, total },
      } = await getTenementList(params)
      setDataSource(list || [])
      setTotal(total)
    } catch (error) {
      console.error('加载数据失败:', error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadData()
  }, [pageNumber, pageSize])

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setQueryForm({
      ...queryForm,
      [name]: value,
    })
  }

  const onChangePage: PaginationProps['onChange'] = (pageNumber: number, pageSize: number) => {
    setPageNumber(pageNumber)
    setPageSize(pageSize)
  }

  return (
    <div>
      <Card>
        <Row className="search" gutter={16}>
          <Col span={4}>
            <p>楼宇名称:</p>
            <Input name="name" value={queryForm.name} onChange={handleInputChange} />
          </Col>
          <Col span={4}>
            <p>负责人:</p>
            <Input name="person" value={queryForm.person} onChange={handleInputChange} />
          </Col>
          <Col span={4}>
            <Button type="primary" className="ml" onClick={loadData}>
              查询
            </Button>
            <Button className="ml" onClick={() => setQueryForm({ name: '', person: '' })}>
              重置
            </Button>
          </Col>
        </Row>
      </Card>
      <Card>
        <Table<DataType> columns={columns} dataSource={dataSource} loading={loading} pagination={false}></Table>
        <Pagination
          showQuickJumper
          defaultCurrent={1}
          total={total}
          current={pageNumber}
          className="fr"
          onChange={onChangePage}
          pageSize={pageSize}
        />
      </Card>
    </div>
  )
}
